HTML5 div在界面水平垂直居中

2023-09-29 08:26| 来源: 网络整理| 查看: 265

设置一个div垂直居中，查了一下，有的用获取屏幕宽度和高度，再减去div宽度的一半，就将div居中，代码如下：

第一个方法：

分为三步：

1.获取到当前屏幕的高度；

2.获取到需要居中的div的高度；

3.用屏幕的高度减去div的高度除以2就是需要给div设置的margin-top的值。

针对上边的例子的JS代码：

　　window.οnlοad=function(){ 　　 var height=document.body.scrollHeight; 　　 var logo_wrap=document.getElementById("logo_wrap"); 　　 var margin_top=(height-100)/2; //因为此div在页面中只用了一次且以后不会改变，所以写了数值，如果是不确定的，获取到高度放着这里就可以　　 logo_wrap.style.marginTop=margin_top+"px"; 　　};

上面的例子是从度娘上查看到的，没有检测验证，只是知道有这么个方法；

第二个方法：

只用css来使div居中：

// 内容

使用css来垂直水平居中

.big{ position: absolute; left: 50%; margin-left: -(div宽度的一半); top: 50%; margin-top: -(div高度的一半) } 注意事项：

1): position要使用absolute，不能使用relative

2): margin-left: -xxPx中是负数的px，目的是消除div宽度和高度带来的影响

3): 以上代码纯手敲，有错误不可避免

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章